<template>
  <div class="publish-page">
    <van-nav-bar
      class="collectTop"
      title="发布房源"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- title -->
    <div class="header">
      <span>房源信息</span>
    </div>
    <!-- form列表 -->
    <div class="form-list">
      <!-- 小区名称 -->
      <div class="house-name">
        <span>小区名称</span>
        <a href="#">请输入小区名称<van-icon name="arrow" /></a>
      </div>
      <!-- 租金 -->
      <div class="rent-price">
        <van-cell-group>
          <van-field
            v-model="rentPriceValue"
            label="租金"
            placeholder="请输入租金/月"
          />
          <span>￥/月</span>
        </van-cell-group>
      </div>
      <!-- 面积 -->
      <div class="rent-price">
        <van-cell-group>
          <van-field
            v-model="areaValue"
            label="建筑面积"
            placeholder="请输入建筑面积"
          />
          <span>m²</span>
        </van-cell-group>
      </div>
      <!-- 户型 -->
      <van-field
        readonly
        clickable
        name="picker"
        :value="roomTypeValue"
        label="户型"
        @click="showPicker = true"
        input-align="right"
      >
        <template #button>请选择 <van-icon name="arrow" /></template>
      </van-field>

      <!-- 所在楼层 -->
      <van-field
        readonly
        clickable
        name="picker1"
        :value="floorValue"
        label="所在楼层"
        @click="showPicker1 = true"
        input-align="right"
      >
        <template #button>请选择 <van-icon name="arrow" /></template>
      </van-field>

      <!-- 朝向 -->
      <van-field
        readonly
        clickable
        name="picker2"
        :value="orientedValue"
        label="朝向"
        @click="showPicker2 = true"
        input-align="right"
      >
        <template #button>请选择 <van-icon name="arrow" /></template>
      </van-field>

      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="roomTypeList"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-popup v-model="showPicker1" position="bottom">
        <van-picker
          show-toolbar
          :columns="floorList"
          @confirm="onConfirm1"
          @cancel="showPicker1 = false"
        />
      </van-popup>
      <van-popup v-model="showPicker2" position="bottom">
        <van-picker
          show-toolbar
          :columns="orientedList"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
        />
      </van-popup>
    </div>
    <!-- 房屋标题 -->
    <div class="form-info">
      <div class="house-title">
        <span>房屋标题</span>
      </div>
      <van-field
        v-model="houseTitle"
        placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
        input-align="left"
      />
      <!-- 房屋图像 -->
      <div class="house-title">
        <span>房屋图像</span>
      </div>
      <van-field name="uploader">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
      <!-- 房屋配置 -->
      <div class="house-title">
        <span>房屋配置</span>
      </div>
      <!-- 配置图标 -->
      <van-grid :column-num="5" :border="false">
        <van-grid-item icon="photo-o" text="衣柜" />
        <van-grid-item icon="photo-o" text="洗衣机" />
        <van-grid-item icon="photo-o" text="空调" />
        <van-grid-item icon="photo-o" text="天然气" />
        <van-grid-item icon="photo-o" text="冰箱" />
        <van-grid-item icon="photo-o" text="暖气" />
        <van-grid-item icon="photo-o" text="电视" />
        <van-grid-item icon="photo-o" text="热水器" />
        <van-grid-item icon="photo-o" text="宽带" />
        <van-grid-item icon="photo-o" text="沙发" />
      </van-grid>
    </div>
    <!-- 房屋描述 -->
    <div class="kong"></div>
    <div class="house-dec">
      <div class="house-title">
        <span>房屋配置</span>
      </div>
      <van-field
        v-model="message"
        rows="5"
        autosize
        type="textarea"
        placeholder="请输入房屋描述信息"
      />
    </div>
    <div class="kong1"></div>
    <!-- 按钮 -->
  <div class="button">
    <div class="cancel" @click="cancelFn">取消</div>
    <div class="submit" @click="submitFn">提交</div>
  </div>
  </div>
</template>

<script>
import { publishRent } from '@/api/rentinfo'
export default {
  name: 'publish-page',
  data () {
    return {
      rentPriceValue: '',
      areaValue: '',
      roomTypeValue: '',
      floorValue: '',
      orientedValue: '',
      houseTitle: '',
      roomTypeList: [],
      floorList: [],
      orientedList: [],
      supportingList: [],
      showPicker: false,
      showPicker1: false,
      showPicker2: false,
      publishList: [],
      uploader: [],
      message: ''
    }
  },
  async created () {
    const { body } = await publishRent()
    console.log(body)
    this.roomTypeList = body.roomType.map((item) => item.label)
    this.floorList = body.floor.map((item) => item.label)
    this.orientedList = body.oriented.map((item) => item.label)
    this.supportingList = body.supporting.map((item) => item.label)
  },
  methods: {
    onConfirm (val) {
      this.roomTypeValue = val
      this.showPicker = false
    },
    onConfirm1 (val) {
      this.floorValue = val
      this.showPicker1 = false
    },
    onConfirm2 (val) {
      this.orientedValue = val
      this.showPicker2 = false
    },
    onClickLeft () {
      this.$router.back()
    },
    submitFn () {

    },
    cancelFn () {}
  }
}
</script>

<style lang="less" scoped>
.header {
  font-size: 15px;
  color: #21b97a;
  padding: 15px 15px 9px;
  border-bottom: 1px solid #eee;
}
.form-list {
  padding-left: 15px;
}
.house-name {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px 12px 0;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #eee;
  .van-icon {
    margin-left: 8px;
    font-size: 15px;
  }
}
.rent-price {
  .van-cell-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 15px;
    .van-field {
      padding: 10px 0;
      width: 210px;
      text-align: justify;
    }
    span {
      font-size: 14px;
      color: #666;
    }
  }
}
.van-field {
  padding: 10px 10px 10px 0;
}
.house-title {
  font-size: 14px;
  color: #333;
  padding: 15px 15px 9px;
  border-bottom: 1px solid #eee;
}
.form-info {
  .van-field {
    padding-left: 15px;
    border-bottom: none;
  }
}
.house-dec {
  .van-field {
    padding-left: 15px;
    border-bottom: none;
  }
}
.kong {
  background-color: #f6f5f6;
  height: 20px;
}
.kong1 {
  background-color: #f6f5f6;
  height: 65px;
}
.button {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  height: 45px;
  font-size: 14px;
  text-align: center;
  line-height: 45px;
  .cancel {
    width: 50%;
    background-color: #fff;
    color: #21b97a;
  }
  .submit {
    width: 50%;
    background-color: #21b97a;
    color: #fff;
  }
}
</style>
